<template>
    <!-- 1.树形列表 
                  2.图片
                  3.link
                  4.文字样式
                  5.为空时默认值
                  6.更多操作下拉
                  7.商品信息（)
                  8.订单信息（考虑和商品信息合并)
                  9.多值的每个值渲染，方向
                  10.下拉
             -->
    <div class="page-body">
        <el-table
            ref="listPageTable"
            v-loading="loading"
            style="width: 100%"
            :data="pageTableData"
            :header-cell-style="{ background: '#FAFAFA', color: '#262626', padding: '12px 0' }"
            border="border"
            stripe="stripe"
            :row-key="rowKey"
            @expand-change="expandChange"
        >
            <template v-for="(column, index) in pageTableFrame">
                <template v-if="column.type == 'index'">
                    <el-table-column
                        v-if="column.visible != false"
                        :key="index"
                        :label="column.label"
                        :width="column.width"
                        :type="column.type"
                        :prop="column.key || ''"
                        :align="column.align || 'center'"
                        :min-width="column.minWidth || 10"
                        :fixed="column.fixed"
                    ></el-table-column>
                </template>
                <template v-else-if="column.type == 'expand'">
                    <el-table-column
                        v-if="column.visible != false"
                        :key="index"
                        :label="column.label"
                        :width="column.width"
                        :type="column.type"
                        :prop="column.key || ''"
                        :align="column.align || 'center'"
                        :min-width="column.minWidth || 10"
                        :fixed="column.fixed"
                    >
                        <template #default="scope">
                            <PageTable
                                v-if="column.frameType == 'table'"
                                :page-table-frame="column.table.pageTableFrame"
                                :page-table-data="scope.row[column.key]"
                                :loading="scope.row.loading"
                            ></PageTable>
                            <slot v-else :name="column.expand" :scope="scope"></slot>
                        </template>
                    </el-table-column>
                </template>
                <template v-else>
                    <el-table-column
                        v-if="column.visible != false"
                        :key="index"
                        :label="column.label"
                        :width="column.width"
                        :prop="column.key || ''"
                        :align="column.align || 'center'"
                        :min-width="column.minWidth"
                        :fixed="column.fixed"
                    >
                        <template #default="scope">
                            <CellRender :cell-render-data="scope.row" :cell-render-frame="column"></CellRender>
                        </template>
                    </el-table-column>
                </template>
            </template>
        </el-table>
        <el-pagination
            v-if="pagination"
            style="padding: 10px; padding-bottom: 25px !important; overflow: hidden; text-align: right"
            :page-sizes="[5, 10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
            v-bind="$attrs"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        ></el-pagination>
    </div>
</template>
<script>
import Vue from 'vue'
import CellRender from './CellRender.vue'
let SIZE_CHANGE = 'size-change'
let CURRENT_CHANGE = 'current-change'
export default {
    name: 'PageTable',
    components: { CellRender },
    inheritAttrs: false,
    props: {
        pageTableFrame: Array,
        pageTableData: Array,
        loading: Boolean,
        pagination: {
            type: Boolean,
            default: false
        },
        totalCount: Number,
        rowKey: {
            type: [String, Function],
            default: ''
        }
    },
    emits: [SIZE_CHANGE, CURRENT_CHANGE],
    watch: {
        pageTableData(val, oldval) {
            if (this.rowKey != '') {
                val.filter((v) => !v.expandStatus).forEach((row) => {
                    let desrow = oldval.find((oldrow) => this.rowKey(oldrow) == this.rowKey(row))
                    if (desrow) {
                        this.$refs.listPageTable.toggleRowExpansion(desrow, false)
                    }
                })
            }
        }
    },
    methods: {
        handleSizeChange(val) {
            this.$emit(SIZE_CHANGE, val)
        },
        handleCurrentChange(val) {
            this.$emit(CURRENT_CHANGE, val)
        },
        expandChange(row) {
            let column = this.pageTableFrame.find((v) => v.type == 'expand')
            if (!row.loading) {
                Vue.set(row, 'loading', false)
            }
            if (!row[column.key]) {
                Vue.set(row, column.key, [])
            }
            if (row.expandStatus) {
                delete row.expandStatus
            } else {
                row.loading = true
                row.expandStatus = true
                let res = column.expand(row)
                if (res instanceof Promise) {
                    res.then((v) => (row[column.key] = v)).finally(function () {
                        row.loading = false
                    })
                } else {
                    row[column.key] = res
                }
            }
        }
    }
}
</script>
<style lang="scss">
.page-body {
    font-size: 12px !important;
    .el-table {
        margin-top: 12px;
        color: #262626;
    }
    .el-table__expanded-cell {
        padding: 10px 50px !important;
    }
}
</style>
